import React, { PureComponent } from 'react'
import { Card, Modal, Button } from 'antd'

export default class Modals extends PureComponent {
  state = { visible: false };

  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  hideModal = () => {
    this.setState({
      visible: false,
    });
  };


  info = () => {
    Modal.info({
      title: 'This is a notification message',
      content: (
        <div>
          <p>some messages...some messages...</p>
          <p>some messages...some messages...</p>
        </div>
      ),
      onOk () { },
    });
  }
  success = () => {
    Modal.success({
      content: 'some messages...some messages...',
    });
  }
  error = () => {
    Modal.error({
      title: 'This is an error message',
      content: 'some messages...some messages...',
    });
  }

  warning = () => {
    Modal.warning({
      title: 'This is a warning message',
      content: 'some messages...some messages...',
    });
  }
  render () {
    return (
      <div>
        <Card title="基础状态框">
          <Button type="primary" onClick={this.showModal}>
            Modal
        </Button>
          <Modal
            title="Modal"
            visible={this.state.visible}
            onOk={this.hideModal}
            onCancel={this.hideModal}
            okText="确认"
            cancelText="取消"
          >
            <p>Bla bla ...</p>
            <p>Bla bla ...</p>
            <p>Bla bla ...</p>
          </Modal>
        </Card>
        <Card title="信息提示">
          <Button onClick={this.info}>Info</Button>
          <Button onClick={this.success}>Success</Button>
          <Button onClick={this.error}>Error</Button>
          <Button onClick={this.warning}>Warning</Button>
        </Card>
      </div>
    )
  }
}
